<!--取消原因-->
<template>
  <div class="app-container-add">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      class="dialogStyleSmall"
      :before-close="cancel"
    >
      <el-form
        v-if="dialogVisible"
        ref="addForm"
        class="dialog-form"
        :model="formData"
        :rules="rules"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="" prop="">
              <template slot="label">
                <span class="labelTitle" v-html="`取消原因`" />
              </template>
              <Remark :remark="formData.remark" :rows="5" :maxlength="500" @getRemark="getRemark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancel">取 消</el-button>
        <el-button size="medium" type="primary" :disabled="btnDisabled" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 字段校验
import { validateLongitude, validateLatitude, validateZ } from '@/utils/validate'
// 页面接口
import { getExplorationById } from '@/api/basicInfo/projectInfo/exploration/index'
import { mapState } from 'vuex'
// 备注
import Remark from '@/components/Common/Remark/index'
export default {
  name: 'Add',
  components: {
    Remark
  },
  props: {
    proId: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        proId: '',
        explorationCode: '', // 勘探点编号
        explorationType: '', // 勘察点类型
        x: '', // 坐标经度
        y: '', // 坐标纬度
        z: '' // 高程
      },
      rules: { // 表单校验
        explorationCode: [
          { required: true, message: '勘探点编号不能为空', trigger: 'blur' },
          { required: true, max: 20, message: '勘探点编号长度不得超过 20 个字符' }
        ],
        explorationType: [
          { required: true, message: '勘察点类型不能为空', trigger: 'blur' }
        ],
        prospectingType: [
          { required: true, message: '物探类型不能为空', trigger: 'blur' }
        ],
        x: [
          { required: true, message: '坐标经度不能为空', trigger: 'blur' },
          { required: true, validator: validateLongitude, trigger: 'blur' }
        ],
        y: [
          { required: true, message: '坐标纬度不能为空', trigger: 'blur' },
          { required: true, validator: validateLatitude, trigger: 'blur' }
        ],
        z: [
          { required: true, message: '高程不能为空', trigger: 'blur' },
          { required: true, validator: validateZ, trigger: 'blur' }
        ]
      }
      /* 新增 end*/
    }
  },
  computed: {
    ...mapState({
      explorationType: state => state.basicInfo.explorationType // 勘探点类型
    })
  },
  methods: {
    /* 新增弹层 start*/
    // 从父组件获取参数的方法
    handleAdd(title, id) {
      this.emptyAddForm()
      this.dialogTitle = title
      this.dialogVisible = true
      if (id) {
        this.getDetailById(id)
      }
    },
    // 获取备注
    getRemark(remark) {
      this.formData.remark = remark
    },
    // 提交按钮
    submitForm() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 获取详情
    getDetailById(id) {
      getExplorationById(id).then(res => {
        if (res) {
          this.formData = { ...res.data }
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    }
    /* 新增弹层 end*/
  }
}
</script>

